<template>
  <VPage class="p-[0px]">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <el-input
          v-model="form.title"
          style="width: 200px"
          clearable
          placeholder="通知标题"
        ></el-input>
        <div style="width: 360px mr-[20px]">
          <el-date-picker
            v-model="form.time"
            clearable
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 100%"
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="defaultTime"
          />
        </div>
        <el-select
          v-model="form.isView"
          placeholder="状态"
          style="width: 100px"
          clearable
        >
          <el-option
            v-for="item in [
              { label: '已读', value: 1 },
              { label: '未读', value: 2 },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <template #toolbar_btns>
        <el-button type="primary" @click="batchView">批量设为已读</el-button>
      </template>
      <template #operation="{ row }">
        <el-button link type="primary" @click="handelDetails(row.id)">
          详情
        </el-button>
        <el-button
          link
          type="primary"
          @click="handleView(row.id)"
          v-if="row.isViewed.value == 2"
        >
          标为已读
        </el-button>
      </template>
      <template #isViewed="{ row }">
        <div>
          <el-tag :type="row.isViewed.value == 2 ? 'danger' : ''">
            {{ row.isViewed.label }}
          </el-tag>
        </div>
      </template>
      <template #messageType="{ row }">
        <div>{{ row?.messageType?.label || "-" }}</div>
      </template>
      <template #title="{ row }">
        <el-link type="primary" @click="handelDetails(row.id)">{{ row.title }}</el-link>
      </template>
    </VTable>
    <Details
      v-model="detailsVisible"
      :id="detailsIds"
      @close="detailsIds = null"
      @refresh="refresh"
    />
  </VPage>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";

const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
];
import Details from "@/views/notice/components/details/index.vue";
import { messageList, messageView } from "@/api/system/notice.js";
const tableRef = ref();

const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  showOverflow:true,
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    { fixed: "left", width: 50, title: "ID", field: "id" },

    {
      title: "通知类型",
      width: 100,
      field: "messageType.label",
      slots: { default: "messageType" },
    },
    {
      title: "通知标题",
      minWidth: 200,
      field: "title",
      slots: { default: "title" },
    },
    {
      title: "状态",
      width: 100,
      field: "isViewed.label",
      slots: { default: "isViewed" },
    },
    { title: "通知时间", width: 170, field: "sendTime" },
    {
      title: "操作",
      width: 160,
      fixed: "right",
      slots: { default: "operation" },
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        const { time } = form;
        let params = {
          ...form,
          startSendTime: time?.[0] || undefined,
          endSendTime: time?.[1] || undefined,
          time: undefined,
        };
        return messageList({ ...page, ...params }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
const handleEdit = () => {};

const detailsVisible = ref(false);
const detailsIds = ref(null);
const handelDetails = (id) => {
  detailsIds.value = id;
  detailsVisible.value = true;
};

const handleView = (id) => {
  viewsMsg([id]);
};
const batchView = () => {
  let records = tableRef.value?.$table?.getCheckboxRecords() || [];
  let arr = records?.map((item) => item["id"]);
  if (!arr?.length) return ElMessage.warning("请至少选择一条数据!");
  viewsMsg(arr);
};
const viewsMsg = async (ids) => {
  try {
    const { code, message } = await messageView({ ids });
    if (code != 200) return ElMessage.error(message);
    ElMessage.success("已读!");
    refresh();
  } catch (error) {}
};
//更新表格数据
const refresh = () => {
  tableRef?.value.$table.commitProxy("query");
};
</script>
<style lang="scss" scoped>
:deep(.el-tag.el-tag--danger){
    background-color: var(--base-danger-bg)
}
:deep(.el-tag.el-tag--default){
   background-color: var(--base-primary-bg);
   border-color: var(--base-primary-bg);;
}
</style>
